<template>
	<view class="">
		<cu-navbar :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">评论</block>
		</cu-navbar>
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index == TabCur ? 'text-mauve cur' : ''" v-for="(item, index) in tablist" :key="index" @tap="tabSelect" :data-id="index">
					{{ item }}
				</view>
			</view>
		</scroll-view>
		<view class="">
			<view class="cu-list menu-avatar comment solids-top">
				<view class="cu-item" v-for="(item, index) in list" :key="index">
					<view class="cu-avatar round" :style="{ backgroundImage: 'url(' + item.avatar + ')' }"></view>
					<view class="content">
						<view class="text-grey" v-text="item.nickname"></view>
						<view class="text-gray text-content text-df" v-text="item.content"></view>
					</view>
				</view>
			</view>
		</view>
		<cu-back-top ref="backtop" :scrollTop="scrollTop"></cu-back-top>
		<view class="padding"><cu-loadmore v-if="list.length" :status="is_loading ? 'loading' : hasMore ? 'hasmore' : 'nomore'"></cu-loadmore></view>
	</view>
</template>

<script>
export default {
	onLoad(e) {
		this.main_id = e.main_id;
		this.get_remark_list();
	},
	data() {
		return {
			main_id: 0,
			TabCur: 0,
			scrollLeft: 0,
			tablist: ['全部评论', '我的评论'],
			list: [],
			page: 1,
			scrollTop: 0,
			is_loading: false,
			hasMore: false
		};
	},
	methods: {
		tabSelect(e) {
			this.TabCur = e.currentTarget.dataset.id;
			this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
			this.list = [];
			if (!this.TabCur) {
				this.get_remark_list();
			} else {
				this.get_my_remark();
			}
		},
		get_remark_list() {
			if (!this.main_id) {
				return;
			}
			this.$api
				.remark_list({
					page: this.page,
					main_id: this.main_id
				})
				.then(res => {
					if (res.code) {
						this.hasMore = res.data.current_page < res.data.last_page;
						this.list = this.list.concat(res.data.data);
					}
				});
		},
		get_my_remark() {
			if (!this.main_id) {
				return;
			}
			this.$api
				.my_remark({
					main_id: this.main_id,
					page: this.page
				})
				.then(res => {
					if (res.code) {
						this.hasMore = res.data.current_page < res.data.last_page;
						this.list = this.list.concat(res.data.data);
					}
				});
		}
	},
	onReachBottom() {
		if (this.hasMore) {
			this.is_loading = true;
			this.page++;
			this.TabCur ? this.get_my_remark() : this.get_remark_list();
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	}
};
</script>

<style>
page {
	background-color: #f4f6f8;
}
</style>
